<template>
	<!-- 图文导航 -->
	<view :class="datas.imageList.length > 4 ? 'graphicnavigations' : 'graphicnavigation'" :style="getStyle">
		<!-- 原有布局（4个及以下项目） -->
		<view v-if="datas.imageList.length <= 4">
			<section class="defaultNavigation" :style="{
	        display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
	        'flex-wrap': datas.imgStyle === 0 ? 'wrap' : 'nowrap',
	        'justify-content': datas.imgStyle === 0 ? 'space-evenly' : 'space-around',
	        'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
	      }">
				<!-- 导航 -->
				<view class="navigationList" @click="click(index)" v-if="datas.titleType === 'down'"
					:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title':''"
					v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

					<view v-if="datas.titleType== 'up' || datas.titleType== 'left'">
						<text :style="{color: datas.textColor, textAlign:datas.titleType=='left'?'left':'center',
									'font-size': datas.textSize + 'px', height: datas.textHeight + 'px', 'line-height': datas.textHeight + 'px',
								}">{{ item.text }}</text>

						<text class="title2"
							v-if="datas.title2=='1' && (datas.titleType === 'up' || datas.titleType== 'left')" :style="{
										color: datas.text2Color,
										textAlign:datas.titleType=='left'?'left':'center',
										'font-size': datas.text2Size + 'px',
										height: datas.text2Height + 'px',
										'line-height': datas.text2Height + 'px',
									}">{{ item.text2 }}</text>

					</view>

					<!-- 所有的图片 -->
					<uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy">
						<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
							:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
					</uni-badge>
					<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
							 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
							-->
					<!-- 文字 -->
					<view v-if="datas.titleType === 'down'">
						<text :style="{
										color: datas.textColor,
										textAlign:datas.titleType=='right'?'left':'center',
										'font-size': datas.textSize + 'px',
										height: datas.textHeight + 'px',
										'line-height': datas.textHeight + 'px',
									}">{{ item.text }}</text>

						<text class="title2" :style="{
										color: datas.text2Color,
										textAlign:datas.titleType=='right'?'left':'center',
										'font-size': datas.text2Size + 'px',
										height: datas.text2Height + 'px',
										'line-height': datas.text2Height + 'px',
									}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text>
					</view>

				</view>

				<view class="navigationList1" @click="click(index)" v-if="datas.titleType === 'right'"
					:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title1':''"
					v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

					<!-- 所有的图片 -->
					<!-- <uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy"> -->

					<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
						style="width: 120rpx; height: 80rpx; padding: 2rpx 0 7rpx 25rpx"
						:style="{ 'border-radius': datas.img_borderRadius + '%' }" />

					<!-- </uni-badge> -->
					<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
							 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
							-->
					<!-- 文字 -->
					<view>
						<text style="margin-left: 20rpx;" :style="{
										color: datas.textColor,
										textAlign:datas.titleType=='right'?'left':'center',
										'font-size': datas.textSize + 'px',
										height: datas.textHeight + 'px',
										'line-height': datas.textHeight + 'px',
									}">{{ item.text }}</text>

						<!-- <text class="title2" :style="{
										color: datas.text2Color,
										textAlign:datas.titleType=='right'?'left':'center',
										'font-size': datas.text2Size + 'px',
										height: datas.text2Height + 'px',
										'line-height': datas.text2Height + 'px',
									}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text> -->
					</view>

				</view>

			</section>
		</view>

		<!-- 翻页布局（大于8个项目） -->
		<view v-else>
			<swiper class="swiper-container" :indicator-dots="true" :autoplay="false">
				<swiper-item v-for="(page, pageIndex) in pages" :key="pageIndex">
					<section class="defaultNavigation">
						<!-- 上面4个项目 -->
						<view class="navigation-row">
							<view class="navigationList" v-for="(item, index) in page.slice(0,4)" :key="index"
								@click="click(pageIndex * 8 + index)" :style="[get_navstyle(item)]">
								<uni-badge :text="item.badge" absolute="rightTop" :offset="badge_xy">
									<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
										:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh' }" />
								</uni-badge>
								<view>
									<text :style="{
	                    color: datas.textColor,
	                    'font-size': datas.textSize + 'px',
	                    height: datas.textHeight + 'px',
	                    'line-height': datas.textHeight + 'px',
	                  }">{{ item.text }}</text>
								</view>
							</view>
						</view>

						<!-- 下面4个项目 -->
						<view class="navigation-row">
							<view class="navigationList" v-for="(item, index) in page.slice(4,8)" :key="index"
								@click="click(pageIndex * 8 + index + 4)" :style="[get_navstyle(item)]">
								<uni-badge :text="item.badge" absolute="rightTop" :offset="badge_xy">
									<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
										:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh' }" />
								</uni-badge>
								<view>
									<text :style="{
	                    color: datas.textColor,
	                    'font-size': datas.textSize + 'px',
	                    height: datas.textHeight + 'px',
	                    'line-height': datas.textHeight + 'px',
	                  }">{{ item.text }}</text>
								</view>
							</view>
						</view>
					</section>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import md5 from "../../Grace6/js/md5.js";
	export default {
		name: 'graphicnavigation',
		props: {
			datas: Object,

		},
		data() {
			return {
				mainStyle: "",
				badge_xy: [10, 10],
				badges: [],
			}
		},
		beforeCreate() {
			// this.mainStyle=this.$comm.getCss(this.datas);
		},

		computed: {
			// 添加pages计算属性
			pages() {
				if (!this.datas || !this.datas.imageList) return [];
				const pages = [];
				for (let i = 0; i < this.datas.imageList.length; i += 8) {
					pages.push(this.datas.imageList.slice(i, i + 8));
				}
				return pages;
			},
			getStyle() {
				if (this.datas) {
					let s = {};
					Object.assign(s, this.datas);
					delete s["image-list"];
					this.mainStyle = this.$comm.getCss(s);
					// console.log("getStyle", this.mainStyle);
				}
				return this.mainStyle;
			}
		},
		created() {

			console.log(this.datas, '--------graphicnavigation')
			// console.log(this.datas.imageList, '--------graphicnavigation')

		},
		methods: {
			badge(index, num) {
				console.log("badge", num);

				let self = this;
				this.$nextTick(() => {
					self.datas.imageList[index].badge = num;

					self.$forceUpdate()
				})
			},
			get_titleType() {
				let t = '0';
				if (this.datas.hasOwnProperty("titleType")) {
					t = this.datas.titleType;
				}
				console.log("get_titleType", t);
				return t;
			},
			is_title2() {
				let t = false;
				if (this.datas.hasOwnProperty("title2")) {
					this.datas.title2 == '1' ? true : false;
				}
				return t;
			},
			get_navstyle(d) {
				let s = {
					width: this.datas.imgStyle === 0 ? '18%' : 375 / this.datas.showSize - 5 + 'rpx',
					backgroundColor: this.datas.itembgColor,
					boxShadow: this.datas.itemBoxShow,
					// border: this.datas.itemBorder != '' ?
					// 	'1px ' + this.datas.itemBorder + ' ' + this.datas.itemBorderColor : '',
					borderRadius: this.datas.itemborderRadius != 0 ? this.datas.itemborderRadius + 'rpx' : '0',
				}
				// if (this.datas.imgStyle == 0) {
				//   s["margin"] = 'unset'
				// }
				// console.log(s);
				return s;
			},

			click(index) {
				let self = this
				console.log("graphicnavigation->click", this.datas.imageList[index])

				if (!this.datas.imageList[index].http.externalLink) {
					this.$boya.msg('敬请期待')
				} else {
					this.$emit("nav", {
						type: "magiccube",
						data: this.datas.imageList[index]
					});
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.graphicnavigations {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 3rpx 0 8rpx rgba(0, 0, 0, 0.2);

		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}

	.graphicnavigation {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		// font-size: 80rpx;

		/* 默认导航 */
		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}
	
	// .swiper-container {
	// 	height: 320rpx;
	// }

	.swiper-container {
		height: 365rpx;
	}

	.navigation-row {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}
</style>